<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>下拉刷新测试</title>
		<link rel="stylesheet" type="text/css" href="mescroll/mescroll.min.css"/>
		<link rel="stylesheet" href="public.css" />
	</head>
	<style type="text/css">
		/*移动端1px下边线*/
		body{background: #fff;}
		.border{ position: relative; }
		.border:after{ content: ''; display:block; position: absolute; width: 100%; left: 0px; bottom: 0px;height: 1px; background-color:  #efefef; -webkit-transform: scaleY(0.5); transform: scaleY(0.5);}
		.banner{height: 13.34rem;}
		.item{height: 0.85rem;font-size: 0.3rem;}
	</style>
	<body>
		<div class="banner">
			<div id="mescroll" class="mescroll"> <!--//id可以改,而"mescroll"的class不能删-->
		        <ul>
		        	<li>
		        		<div class="item border flex flex-pack-center flex-align-center">
		        			<p class="flex-1" style="margin-left: 0.2rem;">2017-12-23</p>
		        			<p style="margin-right: 0.2rem;">+￥24.5</p>
		        		</div>
		        	</li>
		        	<li>
		        		<div class="item border flex flex-pack-center flex-align-center">
		        			<p class="flex-1" style="margin-left: 0.2rem;">2017-12-23</p>
		        			<p style="margin-right: 0.2rem;">+￥24.5</p>
		        		</div>
		        	</li>
		        </ul>
	    	</div>  	
		</div>
	</body>
	<script type="text/javascript" src="mescroll/mescroll.min.js"></script>
	<script type="text/javascript" src="demo.js"></script>
	<script type="text/javascript">
		!(function(doc, win) {
        var docEle = doc.documentElement,//获取html元素
            event = "onorientationchange" in window ? "orientationchange" : "resize",//判断是屏幕旋转还是resize;
            fn = function() {
                var width = docEle.clientWidth;
                width && (docEle.style.fontSize = 50 * (width / 375) + "px");//设置html的fontSize，随着event的改变而改变。
            };
        win.addEventListener(event, fn, false);
        doc.addEventListener("DOMContentLoaded", fn, false);
    	}(document, window));
	</script>
</html>
